<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>结构伪类</title>
		<style type="text/css">
			/*获取article中所有子元素的第一个span元素*/
			/* article span:first-child{
				color: red;
			} */
			
			/* article span:last-child{
				color: red;
			}
			 */
			/*
			:first-of-type
			选择类型是span的第一个元素
			*/
		   /* article span:first-of-type{
			   color: red;
		   } */
		  
		 /* article span:last-of-type{
			   color: red;
		  } */
		  
		  
		  /* :only-child选择是唯一子元素的span标签，必须是子元素 */
		  /* article span:only-child{
			  color: red;
		  } */
		  /*选择同级中类型是span的唯一元素,如果同级中存在多个,那么会找到最后一个*/
		 /* article span:only-of-type{
			  color: red;
		  } */
		  
		  /*第二个元素是span标签的元素*/
		/*  article span:nth-child(2){
			  color: red;
		  } */
			
		/*选择第二个span元素，不管中间的其他元素*/
	/* 	article span:nth-of-type(2){
			color: red;
		} */
		
		/*计算数量 n 为0、1、2、3下面是隔行变色*/
		/*tr>td   当前tr下面所有的子元素,不包括孙子元素*/
		/*使用nth-child()进行隔行变色*/
		/* table .tr1>td:nth-child(2n+1){
			background-color: #008000;
			color: white;
		} */
		
		
		/*从第三个开始设置样式*/
		/* table tr>td:nth-child(n+3){
			background-color: #008000;
			color: white;
		} */
		
		/*设置前三个元素*/
		/* table tr>td:nth-child(-n+3){
			background-color: #f0932b;
		} */
		
		/*从第三个元素开始设置*/
		/*
		如果参数只是n的话，那么就是从第0个元素开始设置，也就是全部设置
		*/
		/* table tr>td:nth-child(n+3){
			background-color: #f0932b;
		} */
		
		
		/*奇数元素*/
		/*选择奇数单元格*/
		/* table tr>td:nth-child(odd){
			background-color: green;
			color: white;
		} */
		
		/*
		选择偶数
		*/
	 /*  table tr>td:nth-child(even){
		   background-color: #EB4D4B;
		   color: #008000;
	   } */
	   
	   
	   
	   /*nth-last-child(n)从最后一个元素开始取*/
	  /* table tr>td:nth-last-child(n+2){
		   background-color: greenyellow;
		   color: white;
	   } */
	   
	   
	   /*获取最后两个元素*/
	  /* table tr>td:nth-last-child(-n+2){
		color: red;
	   } */
	   
	   
	   /*
	   从最后一个元素开始选择span标签,这个递归获取的
	   从最外层开始,获取到最里面
	   */
	  /* article span:nth-last-of-type(n+2){
		   background: red;
	   } */
	   
	   
	   
	   /*排除第一个li元素*/
	   ul>li:not(:nth-child(1)){
		   background: red;
	   }
		
		   
		</style>
	</head>
	<body>
		<!-- <article>
			<span>houdunren.com</span>
			<aside>
				<span>houdunwang.com</span>
				<span>hdcms.com</span>
			</aside>
			<span>houdunren.com</span>
		</article> -->
		
		<!-- table border="1">
			<tr class="tr1">
				<td>houdunren.com</td>
				<td>hdcms.com</td>
				<td>后盾人</td>
				<td>houdunwang.com</td>
				<td>hdcms</td>
			</tr>
		</table> -->
		
		
		<!-- <article>
			<aside>
				<span>houdunren.com</span>
				<span>houdunwang.com</span>
				<strong>hdcms.com</strong>
				<aside>
					<span>houdunren.com</span>
					<span>houdunwang.com</span>
					<strong>hdcms.com</strong>
				</aside>
			</aside>
			<aside>
				<span>houdunren.com</span>
				<span>houdunwang.com</span>
				<strong>hdcms.com</strong>
			</aside>
			<span>hdphp.com</span>
		</article> -->
		
		
		
		<ul>
			<li>houdunren.com</li>
			<li>hdcms.com</li>
			<li>后盾人</li>
		</ul>
		
		
		
		
		
	</body>
</html>
